﻿<div @onclick="HandleAvatarClick" @onmouseover="HandleMouseOverAvatar" @onmouseout="HandleMouseOutAvatar" Class="relative" style="cursor: pointer;">
    <div class="relative d-flex justify-center">
        <MudAvatar Size="Size.Large" Color="Color.Secondary" Class="mt-3 mx-auto">
            <MudImage Src="@AvatarUrl" />
            @if (isHovering)
            {
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none;">
                    <div class="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                        <MudIcon Icon="@Icons.Material.Filled.ArrowDropDownCircle" Size="Size.Medium" Style="color: #94a3b8" />
                    </div>
                </div>
            }
        </MudAvatar>
    </div>
</div>

@code 
{
    [Parameter] public EventCallback OnAvatarClick { get; set; }
    [Parameter] public string AvatarUrl { get; set; } = string.Empty;

    private bool isHovering = false;

    private async Task HandleAvatarClick()
    {
        if (OnAvatarClick.HasDelegate)
        {
            await OnAvatarClick.InvokeAsync();
        }
    }

    private void HandleMouseOverAvatar()
    {
        isHovering = true;
    }

    private void HandleMouseOutAvatar()
    {
        isHovering = false;
    }
}
